<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>购物车</h1>
    <input type="checkbox" class="all">
    <ul class="car_ul"></ul>

    <h2>总价￥：<span class="money">0</h2>

    <script>
        var product_ul = document.querySelector('.product_ul')
        var car_ul = document.querySelector('.car_ul')
        var clear = document.querySelector('.clear')
        var search = document.querySelector('.search')
        var all = document.querySelector('.all')
        var money = document.querySelector('.money')
        var account = document.querySelector('.account')
        var car_list = [{
                id: 1,
                name: "米家小米新风机空气净化器除菌",
                price: 2799,
                quantity: 1,
                img: "https://img12.360buyimg.com/n7/jfs/t1/261720/33/18938/123713/67ac152aF2cefc0d9/8c2a0b0374255e30.jpg.avif"
            },
            {
                id: 2,
                name: "美的 (Midea) 空调 风尊二代系列套餐",
                price: 15796,
                quantity: 1,
                img: "https://img13.360buyimg.com/n7/jfs/t1/272300/31/6037/100890/67da7658F9f3e0ea6/c5c94043dcb40025.jpg.avif"
            }]

        // 渲染
        function apply_car() {
            car_ul.innerHTML = ''
            car_list.forEach(item => {
                car_ul.innerHTML += `<li>
                <input type="checkbox" ${item.is ? 'checked' : ''} onclick='dan(${item.id})'>
                <img src="${item.img}">
                <span>${item.name}</span>
                <span>￥${item.price}</span>
                <button onclick='jian(${item.id})'>-</button>
                <span>${item.quantity}</span>
                <button onclick='jia(${item.id})'>+</button>
                <button onclick='del(${item.id})'>删除</button>
            </li>`
            })
        }
        apply_car()

        // 数量加一
        function jia(id) {
            var a = car_list.findIndex(item => item.id == id)
            car_list[a].quantity++
            apply_car()
            zong()
        }

        // 数量减一
        function jian(id) {
            var a = car_list.findIndex(item => item.id == id)
            if (car_list[a].quantity != 0) {
                car_list[a].quantity--
            }
            apply_car()
            zong()
        }

        // 删除
        function del(id) {
            var i = car_list.findIndex(item => item.id == id)
            car_list.splice(i, 1)
            zong()
            apply_car()
        }
        // 计算总价
        function zong() {
            var zong = 0
            car_list.forEach(item => {
                if (item.is) {
                    zong += item.price * item.quantity
                }
            })
            money.innerHTML = zong
        }

        // 全选反选
        all.onclick = function () {
            car_list.forEach(item => {
                item.is = this.checked
            })
            zong()
            apply_car()
        }

        // 单个价钱
        function dan(id) {
            var i = car_list.findIndex(item => item.id == id)
            car_list[i].is = event.target.checked
            zong()
        }
    </script>
</body>

</html>